```vue
<script setup>
import {ref, computed} from 'vue'
import {getSchedule} from '@/api/home/home'
import {ElMessage} from 'element-plus'

// 响应式状态
const value = ref(new Date()) // 当前选中的日期
const employees = ref([]) // 员工列表
const selectedEmployeeId = ref(null) // 当前选中的员工ID
const currentMonth = ref('') // 当前月份（YYYY-MM）

// 获取当前月份（YYYY-MM）
const getCurrentMonth = (date) => {
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
}

// 加载员工和日报数据
const loadSchedule = (month) => {
  getSchedule({month}).then(res => {
    employees.value = res.data || []
    // 默认选中第一个员工（如果有）
    if (employees.value.length > 0) {
      selectedEmployeeId.value = employees.value[0].employeeId
    }
  }).catch(err => {
    ElMessage.error('获取员工日报数据失败')
    console.error(err)
  })
}

// 初始化加载
onMounted(() => {
  currentMonth.value = getCurrentMonth(value.value)
  loadSchedule(currentMonth.value)
})

// 监听日期变化，更新月份
const handleDateChange = (newDate) => {
  const newMonth = getCurrentMonth(newDate)
  if (newMonth !== currentMonth.value) {
    currentMonth.value = newMonth
    loadSchedule(currentMonth.value)
  }
}

// 计算当前选中员工在选中日期的日报
const currentDailyReport = computed(() => {
  if (!selectedEmployeeId.value || !employees.value.length) return null
  const employee = employees.value.find(emp => emp.employeeId === selectedEmployeeId.value)
  if (!employee || !employee.dailyReports) return null
  const selectedDate = formatDate(value.value)
  return employee.dailyReports.find(report => report.date === selectedDate) || null
})

// 选择员工
const selectEmployee = (employeeId) => {
  selectedEmployeeId.value = employeeId
}

// 格式化日期为 YYYY-MM-DD
const formatDate = (date) => {
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
</script>

<template>
  <div class="app-container">
    <!-- 标题 -->
    <div class="title-container">
      <h3 class="title">日程待办</h3>
    </div>
    <el-row :gutter="20">
      <!-- 左侧：我管理的员工 -->
      <el-col :span="8">
        <el-card shadow="hover" class="employee-list">
          <h4>我管理的员工</h4>
          <el-table
            :data="employees"
            style="width: 100%"
            highlight-current-row
            @row-click="row => selectEmployee(row.employeeId)"
          >
            <el-table-column prop="name" label="姓名" width="100"/>
            <el-table-column prop="deptName" label="部门"/>
          </el-table>
          <el-empty v-if="!employees.length" description="暂无员工数据"/>
        </el-card>
      </el-col>
      <!-- 右侧：日历显示待办 -->
      <el-col :span="16">
        <el-card shadow="hover">
          <el-calendar v-model="value" @change="handleDateChange">
            <template #date-cell="{ data }">
              <div class="calendar-cell">
                <p :class="{ 'is-selected': data.isSelected }">
                  {{ data.day.split('-')[2] }}
                </p>
                <div v-if="selectedEmployeeId && data.day === formatDate(value)" class="daily-report">
                  <el-empty v-if="!currentDailyReport" description="无日报记录"/>
                  <div v-else>
                    <p><strong>今日工作：</strong>{{ currentDailyReport.work || '无' }}</p>
                    <p><strong>明日计划：</strong>{{ currentDailyReport.plan || '无' }}</p>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.title-container {
  padding: 10px 15px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: #409eff;
  }

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}

.employee-list {
  max-height: 600px;
  overflow-y: auto;
}

.calendar-cell {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    margin: 0;

    &.is-selected {
      color: #409eff;
      font-weight: bold;
    }
  }

  .daily-report {
    font-size: 12px;
    color: #666;
    text-align: left;
    padding: 5px;
    background: #f5f7fa;
    border-radius: 4px;
    margin-top: 5px;
    width: 100%;
  }
}
</style>
```